import React from 'react'
import ReactDOM from 'react-dom'

export default function UseEffectFun() {
    const [count, setCount] = React.useState(0)
    const [boolean, setBoolean] = React.useState(true)
    //加的回调
    function add() {
        setCount(count => count + 1)
    }
    function change() {
        setBoolean(boolean => !boolean)
    }
    //卸载组件的回调
    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    // 相当于 componentDidMount
    React.useEffect(() => {
        setTimeout(() => {
            console.log("这是只渲染一次的延时函数");
        }, 2000)
        console.log("相当于componentDidMount，第二个参数为[]，对全部不进行检测监测，只会执行一次");
    }, [])

    React.useEffect(() => {
        console.log("只针对括号里面count变量更新的内容进行触发，boolean更新不会触发");
    }, [count])

    // 相当于 componentDidUpdate
    React.useEffect(() => {
        console.log("相当于componentDidUpdate，不带第二个参数，对state的改变全部进行检测监测");
    })

    // 相当于componentWillUnmount
    React.useEffect(() => {
        let timer = setInterval(() => {
           console.log("定时执行函数");
        }, 1000)
        return () => {
            console.log("相当于componentWillUnmount，return返回时清除定时器");
            clearInterval(timer)
        }
    }, [])

    return (
        <div>
            <button className='returnButton'><a href="/">点击返回主菜单</a></button>
            <h1>useEffectFun</h1>
            <h2>当前求和为：{count}，当前布尔值是:{boolean.toString()}</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={change}>修改布尔值</button>
            <button onClick={unmount}>卸载组件</button>
        </div>
    )
}
